<!--客服面板-->
<div id="cmsFloatPanel">
     <div class="ctrolPanel">
           <a class="arrow" href="#"><span>顶部</span></a>
           <a class="service" href="#"><span>客服</span></a>
           <a class="message" href="#"><span>留言</span></a>
           <a class="qrcode" href="#"><span>微信</span></a>
           <a class="arrow" href="#"><span>底部</span></a>
     </div>
     <div class="servicePanel">
          <div class="servicePanel-inner">
               <div class="serviceMsgPanel">
                    <div class="serviceMsgPanel-hd"><a href="#"><span>关闭</span></a></div>
                    <div class="serviceMsgPanel-bd">
                         <div class="msggroup">售前咨询</div>
                         <div class="msgtool">
                             <html:other settag="qq1" />
                         </div>
                    
                         <div class="msggroup">售后客服</div>
                         <div class="msgtool">
                             <html:other settag="qq2" />
                         </div>
                       
                    </div>
                    <div class="serviceMsgPanel-ft"></div>
                </div>
                <div class="arrowPanel">
                     <div class="arrow02"></div>
                </div>
          </div>
     </div>
     <div class="messagePanel">
          <div class="messagePanel-inner">
               <div class="formPanel">
                     <div class="formPanel-hd">欢迎给我们留言<a href="#"><span>关闭</span></a></div>
                     <div class="formPanel-bd">
                         <form id="form_message" action="{:U('Message/index')}" method="post">
                                <div><textarea name="content" id="message_content" cols="30" rows="4"></textarea></div>
                                <div>联系人： <input type="text" name="name" id="message_name" /></div>
                                <div>电 &nbsp;&nbsp; 话： <input type="text" name="tel" id="message_tel" /></div>
                                <div><input type="submit" id="submit" value="提 交" /> &nbsp;&nbsp; <input type="reset" value="重 置" /></div>
                          </form>
                     </div>
                     <div class="formPanel-ft">
                          <a href="#"><span>强石网络科技提供技术支持</span></a>
                     </div>
               </div>
               <div class="arrowPanel">
                    <div class="arrow01"></div>
                    <div class="arrow02"></div>
               </div>
          </div>
     </div>
     <div class="qrcodePanel">
          <div class="qrcodePanel-inner">
               <div class="codePanel">
                     <div class="codePanel-hd">用微信扫一扫，加为关注<a href="#"><span>关闭</span></a></div>
                     <div class="codePanel-bd">
                          <img src="__UPLOADS__{$wxqrcode}" />
                     </div>
                     <div class="codePanel-ft">
                         <a href="{:U('Content/index',array('id'=>48))}"><span><< 点击下载APP手机客户端 >></span></a>
                     </div>
               </div>
               <div class="arrowPanel">
                    <div class="arrow01"></div>
                    <div class="arrow02"></div>
               </div>
          </div>
     </div>
</div>
<script type="text/javascript">

    $(function(){
        //在线留言
        $('#form_message').ajaxForm({
            beforeSubmit:  checkForm_message, 
            success:       complete_header, 
            dataType: 'json'
        });
        function checkForm_message(){
            if( '' === $.trim($('#message_name').val())){
                alert('联系人不能为空');
                return false;
            }
            if( '' === $.trim($('#message_content').val())){
                alert('内容不能为空');
                return false;
            }
            //可以在此添加其它判断
        }
        function complete_header(data){
            if (data.status===1){
                alert(data.info);
                $('#form_message').resetForm();
            }else{
                alert(data.info);
            }
        }

        // cms客服浮动面板
        if($("#cmsFloatPanel")){
	  $("#cmsFloatPanel > .ctrolPanel > a.arrow").eq(0).click(function(){$("html,body").animate({scrollTop :0}, 800);return false;});
	  $("#cmsFloatPanel > .ctrolPanel > a.arrow").eq(1).click(function(){$("html,body").animate({scrollTop : $(document).height()}, 800);return false;});
	  var objServicePanel = $("#cmsFloatPanel > .servicePanel");
	  var objMessagePanel = $("#cmsFloatPanel > .messagePanel");
	  var objQrcodePanel = $("#cmsFloatPanel > .qrcodePanel");
	  var w_s = objServicePanel.outerWidth();
	  var w_m = objMessagePanel.outerWidth();
	  var w_q = objQrcodePanel.outerWidth();
	  $("#cmsFloatPanel .ctrolPanel > a.service").bind({
		  click : function(){return false;},
		  mouseover : function(){
			  objMessagePanel.stop().hide();objQrcodePanel.stop().hide();
			  if(objServicePanel.css("display") == "none"){
			     objServicePanel.css("width","0px").show();
			     objServicePanel.animate({"width" : w_s + "px"},600);
			  }
			  return false;
		  }
	  });
	  $(".servicePanel-inner > .serviceMsgPanel > .serviceMsgPanel-hd > a",objServicePanel).bind({
		  click : function(){
			  objServicePanel.animate({"width" : "0px"},600,function(){
				objServicePanel.hide();  
			  });
			  return false;
		  }
	  });
	  $("#cmsFloatPanel > .ctrolPanel > a.message").bind({
		  click : function(){return false;},
		  mouseover : function(){
			  objServicePanel.stop().hide();objQrcodePanel.stop().hide();
			  if(objMessagePanel.css("display") == "none"){
			     objMessagePanel.css("width","0px").show();
			     objMessagePanel.animate({"width" : w_m + "px"},600);
			  }
			  return false;
		  }
	  });
	  $(".messagePanel-inner > .formPanel > .formPanel-hd > a",objMessagePanel).bind({
		  click : function(){
			  objMessagePanel.animate({"width" : "0px"},600,function(){
				objMessagePanel.stop().hide();  
			  });
			  return false;
		  }
	  });
	  $("#cmsFloatPanel > .ctrolPanel > a.qrcode").bind({
		  click : function(){return false;},
		  mouseover : function(){
			  objServicePanel.stop().hide();objMessagePanel.stop().hide();
			  if(objQrcodePanel.css("display") == "none"){
			     objQrcodePanel.css("width","0px").show();
			     objQrcodePanel.animate({"width" : w_q + "px"},600);
			  }
			  return false;
		  }
	  });
	  $(".qrcodePanel-inner > .codePanel > .codePanel-hd > a",objQrcodePanel).bind({
		  click : function(){
			  objQrcodePanel.animate({"width" : "0px"},600,function(){
				objQrcodePanel.stop().hide();  
			  });
			  return false;
		  }
	  });

        }
        
    });
  

</script>